<template>
	<section> 
		<el-form class="toolbar" label-width="120px" style="margin-top:10px;padding-top:20px;">
		<el-row>
				<el-col :span="6">
					<el-form-item label="支付时间">
						<el-date-picker
                              v-model="dateValue"
                              type="daterange"
							  @change="datechange"
							  style="width:100%"
                              range-separator="至"
                              value-format="yyyy-MM-dd"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期">
                        </el-date-picker>
					</el-form-item> 
				</el-col>
				<el-col :span="6">
					<el-form-item label="用户账号">
							<el-input v-model="account"></el-input>
					</el-form-item> 
				</el-col>	
				<el-col :span="6">
					<el-form-item label="平台任务号">
							<el-input v-model="taskId"></el-input>
					</el-form-item> 
				</el-col>
				<el-col :span="6">
					<el-form-item label="包裹状态">
							<el-select v-model="state" placeholder="请选择">
                                    <el-option label="未发货" value="0"></el-option>
                                    <el-option label="已发货" value="1"></el-option>
                                </el-select>
					</el-form-item> 
				</el-col>
				
			</el-row>
			<el-row>
				<el-col :span="6">
					<el-form-item label="收货人手机">
							<el-input v-model="mobile"></el-input>
					</el-form-item> 
				</el-col>
				<el-col :span="6">
					<el-form-item label="快递单号">
							<el-input v-model="packNum"></el-input>
					</el-form-item> 
				</el-col>	
				<el-col :span="6">
					<el-form-item label="订单编号">
							<el-input v-model="orderNum"></el-input>
					</el-form-item> 
				</el-col>
				<el-col :span="6">
					<el-form-item label="选择分站">
							<el-select v-model="webSiteId" placeholder="请选择">
							<el-option
							v-for="item in fzlist"
							:key="item.id"
							:label="item.name"
							:value="item.id">
							</el-option>
						</el-select>
					</el-form-item> 
				</el-col>
			<el-form-item>
					<el-button type="primary" @click="shousuo">搜索</el-button> 
                    <el-button type="primary" >导出报表</el-button> 
			</el-form-item>
			</el-row>
			
		</el-form>
		<el-table highlight-current-row :data="dataList" style="width: 100%;">
        <el-table-column align="center" prop="taskId" label="平台任务号" ></el-table-column>
        <el-table-column align="center" prop="packNum" label="包裹号" ></el-table-column>
		<el-table-column align="center" prop="account" label="用户账号" ></el-table-column>
		<el-table-column align="center" prop="mobile" label="手机号" ></el-table-column>
		<el-table-column align="center" prop="payTime" label="支付时间" ></el-table-column>
		<el-table-column align="center" prop="orderNum" label="第三方订单号" ></el-table-column>
        <el-table-column align="center" label="包裹状态">
          <template slot-scope="scope">
              <span v-if="scope.row.state==0">未发货</span>
			  <span v-if="scope.row.state==1">已发货</span>
          </template>
        </el-table-column>
        
      </el-table>
			
     <div style="padding:20px;text-align:center;">
            <el-pagination
            background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div> 

	</section>
</template>

<script>
import {gettime} from "../../utils/formData";  
export default {
  data() {
    return {
	  total:0,
      page: 1,
      size: 10,
	  dataList: [],
	  dateValue:'',
	  fzlist:[],
	  begin:'',
	  end:'',
	  account:'',
	  taskId:'',
	  state:'',
	  mobile:'',
	  packNum:'',
	  orderNum:'',
	  webSiteId:''
    };
  },
  methods: {
	//获取列表
	getfzlist(){
		let that = this;
      this.axios({
        method: "GET",
        headers: {
          "Authorization": sessionStorage.getItem("token"),
          "Content-Type": "application/x-www-form-urlencoded",
          "domain": "taobao.tianyalei.com"
        },
        url:
          "/webSite?page=0&size=999999&name=&account="
      }).then(function(response) {
        if (response.data.code == 200) {
          that.fzlist = response.data.data.list;
        }
      });
	},
    shousuo: function() {
      let that = this;
      this.axios({
        method: "GET",
        headers: {
          "Authorization": sessionStorage.getItem("token"),
          "Content-Type": "application/x-www-form-urlencoded",
          "domain": "taobao.tianyalei.com"
        },
        url: "/pack?page="+(that.page-1)+"&size="+that.size+"&account="+that.account+"&state="+that.state+"&taskId="+that.taskId+"&mobile="+that.mobile+"&packNum="+that.packNum+"&orderNum="+that.orderNum+"&webSiteId="+that.webSiteId
      }).then(function(response) {
        if (response.data.code == 200) {
					that.dataList = response.data.data.list;
					that.total=response.data.data.totalCount;
           for(var i=0;i<that.dataList.length;i++){
						 that.dataList[i].payTime=gettime(that.dataList[i].payTime)
					}
        }
      });
    },
		 datechange(e){
		 this.begin=e.split('至')[0];
		 this.end=e.split('至')[1];
	  },
		handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.size=val;
        this.shousuo();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page=val;
        this.shousuo();
      }
    
  },

  created() {
	this.getfzlist();  
    this.shousuo();
  }
};
</script>